.page-520hd {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  background-color: #ed881d;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .hd-top {
    width: 100%;
    flex: 1;
    background: url("../../assets/520HD.jpg") center top no-repeat;
    height: 898/75rem;
    background-size: 100% auto;
  }
  .hd-bot {
    width: 100%;
    display: flex;
    height: 380/75rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .btn-lq {
      display: block;
      width: 650/75rem;
      height: 112/75rem;
      background-color: #fff;
      line-height: 112/75rem;
      text-align: center;
      margin: 0 auto;
      font-size: 50/75rem;
      color: #ed881d;
      border-radius: 10/75rem;
      &:active {
        background-color: darken(#fff, 5%);
      }
    }
    .view-rule {
      display: block;
      font-size: 32/75rem;
      vertical-align: middle;
      color: #fff;
      margin-top: 50/75rem;
    }
  }
}

.return-btn {
  position: absolute;
  top: 30/75rem;
  left: 30/75rem;
  height: 64/75rem;
  width: 64/75rem;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  align-items: center;
  background-color: rgba(0,0,0,0.7);
  .Icon{
    display: inline-block;
    width: 28/75rem;
    height: 28/75rem;
    fill:#fff;
  }
}

.page-520rule {
  transition: all .5s ease;
}

.hd-enter, .hd-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.hd-modal-wraper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  .hd-modal {
    position: relative;
    width: 690/75rem;
    height: 602/75rem;
    background-color: #e9b600;
    border-radius: 15/75rem;
    padding: 102/75rem 8/75rem 0;
    .hd-modal-image {
      img{
        display: block;
        width: 100%;
      }
    }
    a {
      display: block;
      width: 393/75rem;
      height: 80/75rem;
      line-height: 80/75rem;
      text-align: center;
      background-color: #fff;
      margin: 83/75rem auto;
      border-radius: 8/75rem;
      font-size: 36/75rem;
      color: #ef1919;

    }
    .close {
      display: block;
      line-height: 1;
      position: absolute;
      top: 22/75rem;
      right: 32/75rem;
      font-size: 72/75rem;
      color: #fff;
      vertical-align: top;
    }
  }
}

.hdmodal-transition {
  transition: all .3s ease;
  opacity: 1;
  .hd-modal {
    transition: all .3s ease;
    transform: scale(1, 1)
  }
}

.hdmodal-enter, .hdmodal-leave {
  opacity: 0;
  .hd-modal {
    transform: scale(0, 0)
  }
}
